import { defineStore } from 'pinia'


export const useThem = defineStore('them', {
  persist: true,
  state: () => {
    return {
      isDark: false
    }
  },
  actions: {
    setThem(target: boolean, e: PointerEvent) {
      this.isDark = target
      const hasDark = document.documentElement.classList.contains('dark')
      // 开始一次视图过渡：
      if (!document.startViewTransition) {
        if (target) document.documentElement.classList.add('dark')
        else document.documentElement.classList.remove('dark')

      } else {
        const transition = document.startViewTransition(() => {
          if (target) document.documentElement.classList.add('dark')
          else document.documentElement.classList.remove('dark')
        })
        const x = e.clientX
        const y = e.clientY
        const targetRadius = Math.hypot(Math.max(window.innerHeight - y, y), Math.max(window.innerWidth - x, x))
        const clipPath = [`circle(0% at ${x}px ${y}px)`, `circle(${targetRadius}px at ${x}px ${y}px)`]
        transition.ready.then(() => {
          document.documentElement.animate({
            clipPath
          }, {
            duration: 500,
            pseudoElement: '::view-transition-new(root)'
          })
        })
      }

    },
    recoverThem(target: boolean) {
      if (!document.startViewTransition) {
        if (target) document.documentElement.classList.add('dark')
        else document.documentElement.classList.remove('dark')
      } else {
        document.startViewTransition(() => {
          if (target) document.documentElement.classList.add('dark')
          else document.documentElement.classList.remove('dark')
        })
      }

    }
  }
})